import './style/index.scss'
import {Cat2d} from "@cat2d/core";

const cat2d = new Cat2d(document.getElementById('myCanvas'))
cat2d.setOptions({
  grid: true,
  rule: true
})

cat2d.open({
  scale: 1,
  x: 100,
  y: 100,
  pens: [
    {
      name: 'rectangle',
      width: 100,
      height: 100,
      x: 100,
      y: 100,
      text: "12312",
      lineWidth: 10,
      lineStrokeImage: 'http://zutai.web.xinzhidi.cn/files/82c21206c91940619040b5dca4acaece.jpeg',
      lineStrokeImageSize: [10],
      borderRadius: 10,
      hoverState: {
        color: '#ff0000',
        width: 120,
        height: 120,
        x: 90,
        y: 90
      },
      backgroundColor: 'linear-gradient(45deg, #ff000088 0%, #00ff0088 50%, #0000ff88 100%)'
    },
    {
      name: 'message',
      width: 50,
      height: 50,
      x: 132,
      y: 412,
      color: 'linear-gradient(45deg, #ff000088 0%, #00ff0088 50%, #0000ff88 100%)'
    },
    {
      name: 'circle',
      width: 100,
      height: 100,
      x: 250,
      y: 100,
      text: "12312",
      lineWidth: 0,
      backgroundColor: 'linear-gradient(45deg, #ff000088 0%, #00ff0088 50%, #0000ff88 100%)',
      backgroundImage: 'http://zutai.web.xinzhidi.cn/files/82c21206c91940619040b5dca4acaece.jpeg',
      backgroundImageSize: 'cover',
      backgroundImagePosition: 'center'
    },
    {
      name: 'rectangle',
      width: 400,
      height: 300,
      x: 650,
      y: 100,
      text: "12312",
      borderRadius: 20,
      backgroundColor: 'linear-gradient(45deg, #ff000088 0%, #00ff0088 50%, #0000ff88 100%)',
    },
    {
      id: '1',
      name: 'combine',
      width: 100,
      height: 100,
      x: 400,
      y: 300,
      rotate: 45,
      backgroundColor: 'linear-gradient(45deg, #ff000088 0%, #00ff0088 50%, #0000ff88 100%)',
      children: ['2', '3', '4'],
      visible: false
    },
    {
      id: '2',
      name: 'rectangle',
      width: 0.35,
      height: 0.35,
      x: 0.1,
      y: 0.1,
    },
    {
      id: '3',
      name: 'rectangle',
      width: 0.35,
      height: 0.35,
      x: 0.55,
      y: 0.55,
    },
    {
      id: '4',
      name: 'combine',
      width: 0.35,
      height: 0.35,
      x: 0.55,
      y: 0.1,
      children: ['5', '6']
    },
    {
      id: '5',
      name: 'rectangle',
      width: 0.35,
      height: 0.35,
      x: 0.1,
      y: 0.1,
    },
    {
      id: '6',
      name: 'rectangle',
      width: 0.35,
      height: 0.35,
      x: 0.55,
      y: 0.55,
    },
    {
      name: 'line',
      width: 100,
      height: 200,
      x: 300,
      y: 200,
      hoverState: {
        lineWidth: 5
      },
      anchors: [
        {
          x: 0,
          y: 0,
          next: {
            x: 0.25,
            y: 0
          }
        },
        {
          x: 1,
          y: 0.25,
          prev: {
            x: 1,
            y: 0
          },
          next: {
            x: 1,
            y: 0.5
          }
        },
        {
          x: 0,
          y: 0.75,
          prev: {
            x: 0,
            y: 0.5
          },
          next: {
            x: 0,
            y: 1
          }
        },
        {
          x: 1,
          y: 1,
          prev: {
            x: 0.75,
            y: 1
          }
        }
      ]
    }
  ]
})

window.cat2d = cat2d
